<template>
  <div class="app-container warehouseCheck">
    <el-form :model="selectForm" ref="queryForm" :inline="true" label-width="120px">
      <el-form-item label="存放位置：">
        <el-select v-model="selectForm.repositoryName" placeholder="请选择" multiple >
          <el-option :value="selectForm.repositoryName" class="option">
            <el-tree :data="repositoryName" default-expand-all show-checkbox check-strictly node-key="id"
                     ref="tree" highlight-current :props="defaultProps"
                     @check-change="handleCheckChange"></el-tree>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="盘点日期：">
        <el-date-picker
          size="small"
          v-model="selectForm.checkDate"
          value-format="yyyy-MM-dd"
          type="date"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="盘点单号：">
        <el-input size="small"  v-model="selectForm.checkCode" placeholder="请输入盘点单号" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" icon="el-icon-search">搜索</el-button>
        <el-button size="mini" type="success" icon="el-icon-plus" @click="add">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list.rows" border >
      <el-table-column align="center" type="index" label="序号" width="55"/>
      <el-table-column label="盘点单号" width="150"  prop="checkCode">
        <template slot-scope="scope">
          <div class="bule" @click="details(scope.row)">{{scope.row.checkCode}}</div>
        </template>
      </el-table-column>
      <el-table-column label="盘点日期" prop="checkDate" width="150" />
      <el-table-column label="盘点仓库" prop="repositoryName" width="150" />
      <el-table-column label="盘点人" prop="checkUser" width="150" />
      <el-table-column label="盘点结果" prop="checkResult">
        <template slot-scope="scope">
          入库单号<span class="bule" @click="enterDetails(scope.row)">{{scope.row.codeOne}}</span>
          出库单号<span class="bule" @click="comeDetails(scope.row)">{{scope.row.codeTwo}}</span>
        </template>
      </el-table-column>

    </el-table>
    <pagination
      :total="list.total?list.total:0"
      :page.sync="selectForm.pageNum"
      :limit.sync="selectForm.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import { treeselect } from "@/api/system/dept";
  import { warehouseCheck, } from "@/api/consumable/index";

  export default {
    name: "warehouseCheck.vue",
    data(){
      return{
        selectForm:{
          repositoryName:'',
          checkDate:'',
          checkCode:'',
          pageNum: 1,
          pageSize: 10,
        },
        repositoryName:[],
        defaultProps: {
          children: "children",
          label: "label"
        },
        loading:false,
        list:[{
          checkCode:'MS202006080011',
          checkDate:'2020-05-20',
          repositoryName:'仓库一',
          checkUser:'张三',
          checkResult:'',
          codeOne:'MS202006080011',
          codeTwo:'MS202006080011',
        }],
      }
    },

    created() {
      this.getTreeselect();
      this.getList();
    },
    methods:{
      async getList(){
        let res=await warehouseCheck(this.selectForm);
        if(res.code==200){
          this.list=res;
        }else{

        }
      },
      getTreeselect() {
        treeselect().then(response => {
          this.repositoryName =  response.data;
        });
      },
      handleCheckChange(data, checked, node) {
        var res =this.$refs.tree.getCheckedNodes()
        var labelArr=[]
        var keyArr = []
        for (var i=0;i<res.length;i++ ){
          labelArr.push(res[i].label)
          keyArr.push(res[i].id)
        }
        this.selectForm.repositoryName = labelArr;
      },
      add(){
        this.$router.push('/consumable/warehouseCheckAdd');
      },
      details(row){
        this.$router.push({path:'/consumable/warehouseCheckDetail',query:{data:row}});
      },
      enterDetails(row){
        this.$router.push({path:'/consumable/warehouseCheckEnterDetail',query:{data:row}});
      },
      comeDetails(row){
        this.$router.push({path:'/consumable/warehouseCheckComeDetail',query:{data:row}});
      },

    }
  }
</script>

<style scoped lang="scss">
  .warehouseCheck {
    .bule {
      color: #2196F3;
      cursor: pointer;
      padding:0 5px;
    }
  }
  .option {
    height: auto;
  }
</style>
